<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="<%=request.getContextPath() %>/css/common.css" rel="stylesheet" />
<title>华纵科技</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.min.js"></script>
<style type="text/css"> 
/*密码强度*/
.pw-strength {clear: both;position: relative;top: 8px; margin-left:60px;}
.pw-bar{background: url("<%=request.getContextPath() %>/img/pwd-1.png") no-repeat;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url("<%=request.getContextPath() %>/img/pwd-2.png") no-repeat; width:0px; height:14px;position: absolute;top: 0px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
</style>
<script type="text/javascript">
$(function() {
	$("#loginbtn").click(function(){
		$("#regbtn").removeClass("btn-on");
		$("#loginbtn").addClass("btn-on");
		$("#logindiv").css("display","block");
		$("#regdiv").css("display","none");
	})
	
	$("#regbtn").click(function(){
		$("#loginbtn").removeClass("btn-on");
		$("#regbtn").addClass("btn-on");
		$("#regdiv").css("display","block");
		$("#logindiv").css("display","none");
	})
	
	
	$('#pass').keyup(function () { 
		var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
		var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
		var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 
	
		if (false == enoughRegex.test($(this).val())) { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass(' pw-defule'); 
			 //密码小于六位的时候，密码强度图片都为灰色 
		} 
		else if (strongRegex.test($(this).val())) { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass(' pw-strong'); 
			 //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
		} 
		else if (mediumRegex.test($(this).val())) { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass(' pw-medium'); 
			 //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
		} 
		else { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass('pw-weak'); 
			 //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
		} 
		return true; 
	}); 
	
	
	$(".loginbtn").click(function(){
	    var data = {};
	    data["username"] = $("input[name='username']:eq(0)").val();
        data["password"] = $("input[name='password']:eq(0)").val();

		$.post("<%=request.getContextPath()%>/server/login",data,function(result){
		    if("success" == result.msg){
                $("#loginMsg").text("");
                var user = result.user;
                if(user.auth == "普通用户"){
                    location.href = "<%=request.getContextPath()%>/client/todayArrive"
                }else{
                    location.href = "<%=request.getContextPath()%>/server/main"
                }
            }else{
		        $("#loginMsg").text(result.msg);
            }
        },"json")

	})
});


</script>
</head>

<body>

<div class="login-content">
	<div class="login-logo"><a href="#" title="华纵科技"></a></div>
	<div class="login-cont">
    	<a href="#" id="loginbtn" class="btn-a block fl h40 w90 cursor brad f16 b marl40 btn-on">登录</a>
        <a href="#" id="regbtn" class="btn-a block fr h40 w90 cursor brad f16 b marr40">注册</a>
        <div id="logindiv">
            <div class="clear h33 img6"></div>
            <div class="log-c-d1">
                <div class="mp24">
                    <div class="log-l">用户名</div>
                    <div class="log-r"><input type="text" name="username" class="log-inp" placeholder="请输入用户名" /></div>
                    <div class="clear h20" style="padding-left: 70px;"><font color="red" id="loginMsg"></font></div>
                    
                    <div class="log-l">密码</div>
                    <div class="log-r"><input type="password" name="password" class="log-inp" placeholder="请输入密码" /></div>
                    <div class="clear h20"></div>
                    
                    <div class="log-l">验证码</div>
                    <div class="log-r"><input type="text" name="checkcode" class="log-inp" placeholder="请输入验证码" /></div>
                    <div class="clear h25"></div>
                    <a href="#" style="margin-left: 37%;margin-top: 4%;" class="btn-a block fl h30 w70 cursor brad f16 b btn-on loginbtn">登录</a>
                    <!-- <a href="#" class="btn-a block fl h30 w70 cursor brad f16 b marl40">注册</a> -->
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        
        <div id="regdiv" style="display:none;">
        	<div class="clear h33 img7"></div>
            <div class="log-c-d1">
                <div class="mp24">
                    <div class="log-l">用户名</div>
                    <div class="log-r"><input type="text" name="username" class="log-inp" placeholder="请输入用户名，汉字/字母" /></div>
                    <div class="clear h20"></div>
                    
                    <div class="log-l">手机</div>
                    <div class="log-r"><input type="text" name="tel" class="log-inp" placeholder="请输入正确手机号码" /></div>
                    <div class="clear h20"></div>
                    
                    <div class="log-l">邮箱</div>
                    <div class="log-r"><input type="text" name="email" class="log-inp" placeholder="请输入正确邮箱" /></div>
                    <div class="clear h20"></div>
                    
                    <div class="log-l">密码</div>
                    <div class="log-r"><input type="password" name="password" class="log-inp"  id="pass"  placeholder="请设置密码" /></div>
                    <div class="clear pw-strength"   id="level">
                    	<div class="pw-bar"></div>
                        <div class="pw-bar-on"></div>
                        <div class="pw-txt">
                        <span>弱</span>
                        <span>中</span>
                        <span>强</span>
                        </div>
                    </div>
                    <div class="clear h20"></div>
                    <div class="log-l">验证码</div>
                    <div class="log-r"><input type="text" name="checkcode" class="log-inp" placeholder="请输入图片验证码" /></div>
                    <div class="clear h25"></div>
                    <a href="#" style="margin-left: 37%;margin-top: 4%;" class="btn-a block fl h30 w70 cursor brad f16 b marl40 btn-on">注册</a>
                    <!-- <a href="#" class="btn-a block fl h30 w70 cursor brad f16 b marl40">登录</a> -->
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        
    </div>

</div>
</body>
</html>
